<template>
  <div class="comparison-wrap">
    <div class="order-grid">
      <div
        v-for="(contrast, index) in contrastProductTable"
        :key="contrast.orderCode || index"
        class="order-card"
        :class="{ selected: orderCode === contrast.orderCode }"
        @click="orderCode = contrast.orderCode"
      >
        <el-form label-width="80px" class="order-form">
          <el-row :gutter="10" class="order-form-row">
            <el-col :span="12" class="order-radio-col">
              <el-form-item label="比价单">
                <el-radio v-model="orderCode" :label="contrast.orderCode">
                  {{ contrast.orderCode }}
                </el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="ta-r">
              <el-button
                type="info"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click.stop="handleAlterStatus(contrast, index)"
              >{{ contrast.showFlag ? '隐藏' : '展开' }}</el-button>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="厂家">{{ contrast.manufacturerName || '-' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交货期">
                <span v-if="contrast.jhValid">{{ contrast.jhValid + '天' }}</span>
                <span v-else>无</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总价">{{ contrast.allPrice || '-' }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 商品信息 -->
        <div class="goods-title">商品信息</div>
        <el-table :ref="'productTable' + index" :data="contrast.products" v-show="contrast.showFlag">
          <el-table-column type="index" width="55" align="center" label="序号"/>
          <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true"/>
          <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="产品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
          <el-table-column label="计数单位" align="center" prop="unitName"/>
          <el-table-column label="商品数量" align="center" prop="productNum"/>
          <el-table-column label="商品单价" align="center" prop="oldOnlyPrice"/>
          <el-table-column label="商品总价" align="center" prop="oldAllPrice"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComparisonProduct',
  dicts: ['wms_product_cc_unit'],
  props: {
    contrastProductTable: { type: Array, default: () => [] },
    openFlag: { type: Boolean, default: false }
  },
  data(){
    return {
      pickerOptions: {
        disabledDate(time){ return time.getTime() < Date.now() - 8.64e7 }
      },
      orderCode: null
    }
  },
  methods: {
    // 获取选择商品列表
    getSelectedProductList(){
      if (this.orderCode) {
        const obj = this.contrastProductTable.find(item => item.orderCode === this.orderCode)
        if (!obj) { this.$message.error('未找到所选比价单'); return {} }
        (obj.products || []).forEach(item => {
          item.oldOnlyPrice = item.onlyPrice
          item.oldAllPrice = item.allPrice
          item.priceComparisonOrder = this.orderCode
        })
        return { cjJhValid: obj.jhValid, products: obj.products, orderCodes: [this.orderCode] }
      }
      this.$message.error('未选择比价单')
      return {}
    },
    handleAlterStatus(contrast, index){
      contrast.showFlag = !contrast.showFlag
      this.$set(this.contrastProductTable, index, contrast)
    }
  },
  watch: {
    openFlag(nv){ if (nv) this.orderCode = null }
  }
}
</script>

<style scoped>
.comparison-wrap{ padding:0 }

/* 两列网格：一排两个，多余的换行向下 */
.order-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }

.order-card{ border:1px solid #ebeef5; border-radius:10px; padding:10px; background:#fff; transition:all .2s ease; cursor:pointer }
.order-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06) }
.order-card.selected{ border-color:#409eff; background:#ecf5ff }

.order-form{ margin-bottom:6px }
.order-form-row{ align-items:center }
.order-radio-col{ display:flex; align-items:center }
.ta-r{ text-align:right }

.goods-title{ font-weight:600; margin:6px 0 }

/* 小屏改一列 */
@media (max-width: 768px){ .order-grid{ grid-template-columns:1fr } }
</style>
